<style>
    .vl {
        vertical-align: middle !important;
    }
</style>
<!--页面主要内容-->
<main class="lyear-layout-content">
    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class=" callout-success callout" style="padding: 0;">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb" style="padding: 1.25rem 1rem;background-color: white;">
                            <li class="breadcrumb-item" aria-current="page">商品列表</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-toolbar d-flex flex-column flex-md-row">
                        <div class="toolbar-btn-action">
                            <a class="btn btn-primary m-r-5" href="{:url('admin/product/add')}"><i
                                    class="mdi mdi-plus"></i> 新增</a>
                            <a class="btn btn-danger dels" href="javascript:;"><i class="mdi mdi-window-close"></i>
                                删除</a>
                        </div>

                        <form class="search-bar ml-md-auto form-inline" method="get" action="{:url('admin/product/search')}" role="form"
                            id="search_form">

                            <div class="form-group">
                                <input type="text" class="form-control mb-2 mr-sm-2" id="nickname" name="name"
                                    placeholder="可输入商品名称">
                            </div>

                            <div class="form-group">
                                <select class="form-control mb-2 mr-sm-2" name="typeid" id="typeid">
                                    <option value="">请选择商品分类</option>
                                    {foreach $typeList as $item}
                                    <option value="{$item.id}">{$item.name}</option>
                                    {/foreach}
                                </select>
                            </div>

                            <div class="form-group">
                                <select class="form-control mb-2 mr-sm-2" name="flag" id="flag">
                                    <option value="">请选择类别</option>
                                    <option value="1">新品</option>
                                    <option value="2">热销</option>
                                    <option value="3">推荐</option>
                                </select>
                            </div>


                            <button type="submit" class="btn btn-primary mb-2">提交</button>
                        </form>
                        <a href="{:url('admin/product/index')}" class="btn btn-info mb-2"
                            style="margin-left: 10px;">重置</a>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" id="check-all" />
                                                <label class="custom-control-label" for="check-all"></label>
                                            </div>
                                        </th>
                                        <th>编号</th>
                                        <th>商品名称</th>
                                        <th>封面</th>
                                        <th>商品分类</th>
                                        <th>原价</th>
                                        <th>库存</th>
                                        <th>类别</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="tb">
                                    {foreach $productList as $item}
                                    <tr>
                                        <td>
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input ids" name="ids[]"
                                                    value="{$item.id}" id="ids-{$item.id}" />
                                                <label class="custom-control-label" for="ids-{$item.id}"></label>
                                            </div>
                                        </td>
                                        <td class="vl">{$item.id}</td>
                                        <td class="vl" style="white-space: normal;">{$item.name}</td>
                                        <td class="vl">
                                            <img class="rounded" src="{$item.cover_cdn}" alt="{$item.name}" width="50"
                                                height="50" />
                                        </td>
                                        <td class="vl">{$item.type.name}</td>
                                        <td class="vl">{$item.price}</td>
                                        <td class="vl">{$item.stock}</td>
                                        <td class="vl" style="font-size: 18px">
                                            <span class="badge {$item.flag_class}">{$item.flag_text}</span>
                                        </td>
                                        <td class="vl">
                                            <div class="btn-group">
                                                <a class="btn btn-xs btn-default"
                                                    href="{:url('admin/product/edit',['id' => $item['id']])}"
                                                    data-toggle="tooltip" data-original-title="编辑"><i
                                                        class="mdi mdi-pencil"></i></a>
                                                <a class='btn btn-xs btn-default del' data-original-title='删除'
                                                    href='javascript:;' data-toggle='tooltip' data-id='{$item.id}'
                                                    data-action="del"><i class='mdi mdi-window-close'></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                    {/foreach}
                                </tbody>
                            </table>
                        </div>

                        <div style="text-align: center">{$productList->render()}</div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</main>
<!--End 页面主要内容-->

<script>
    // 获取的id
    function GetId() {
        // 存放id的数组
        let list = []

        $('input[name="ids[]"]:checked').each(function () {
            // console.log(item);
            list.push($(this).val())
        })

        return list
    }

    let idArr = [];

    // $("#search_form").on('submit', function (e) {
    //     e.preventDefault();
    //     let formData = $(this).serialize();
    //     // console.log(formData);
    //     // return false
    //     $.ajax({
    //         type: "get",
    //         url: `{:url('admin/product/index')}`,
    //         data: formData,
    //         dataType: "json",
    //         success: function (res) {
    //             if (res.code === 1) {
    //                 // $.notify({
    //                 //     icon: 'mdi mdi-check',
    //                 //     message: res.msg,
    //                 // }, {
    //                 //     type: "success",
    //                 // });
    //                 location.reload()
    //             } else {
    //                 $.notify({
    //                     icon: 'mdi mdi-window-close',
    //                     message: res.msg,
    //                 }, {
    //                     type: "danger",
    //                 });
    //             }
    //         },
    //     });
    // });


    $(".del").on("click", function () {
        let pid = $(this).data("id");
        // console.log(pid);
        // return false;
        $.confirm({
            title: "提示",
            escapeKey: true,
            content: "是否删除此数据",
            backgroundDismiss: true,
            theme: 'modern',
            type: 'red',
            icon: 'mdi mdi-alert-outline mdi-36px',
            buttons: {
                okay: {
                    text: "确认",
                    keys: ["enter"],
                    btnClass: 'btn-info',
                    action: function () {
                        $.ajax({
                            type: "post",
                            url: `{:url('admin/product/delete')}`,
                            data: {
                                action: 'del',
                                pid,
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 1) {
                                    $.notify({
                                        icon: 'mdi mdi-check',
                                        message: res.msg,
                                    }, {
                                        type: "success",
                                    });
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    $.notify({
                                        icon: 'mdi mdi-window-close',
                                        message: res.msg,
                                    }, {
                                        type: "danger",
                                    });
                                }
                            },
                        });
                    },
                },
                cancel: {
                    text: "取消",
                    keys: ["ctrl", "shift"],
                    btnClass: 'btn-danger'
                },
            },
        });
    });

    $('.dels').on('click', function () {
        idArr = GetId();
        if (idArr.length === 0) {
            $.notify({
                icon: 'mdi mdi-alert',
                message: '请选择您想要操作的数据',
            }, {
                type: "info",
            });
            return false;
        }

        $.confirm({
            title: "提示",
            escapeKey: true,
            content: "是否删除选中商品",
            backgroundDismiss: true,
            theme: 'modern',
            type: 'red',
            icon: 'mdi mdi-alert-outline mdi-36px',
            buttons: {
                okay: {
                    text: "确认",
                    keys: ["enter"],
                    btnClass: 'btn-info',
                    action: function () {
                        $.ajax({
                            type: "post",
                            url: `{:url('admin/product/delete')}`,
                            data: {
                                action: 'dels',
                                idArr,
                            },
                            dataType: "json",
                            success: function (res) {
                                if (res.code === 1) {
                                    $.notify({
                                        icon: 'mdi mdi-check',
                                        message: res.msg,
                                    }, {
                                        type: "success",
                                    });
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    $.notify({
                                        icon: 'mdi mdi-window-close',
                                        message: res.msg,
                                    }, {
                                        type: "danger",
                                    });
                                }
                            },
                        });
                    },
                },
                cancel: {
                    text: "取消",
                    keys: ["ctrl", "shift"],
                    btnClass: 'btn-danger',
                },
            },
        });
        // console.log(idArr);
    })
</script>